<template>
    <div class="content">
      <el-dialog title="学生信息录入" :visible.sync="dialogFormVisible" class="dialog">
        <el-form :model="student">
          <el-form-item label="学号" :label-width="formLabelWidth">
            <el-col :span="9">
              <el-input v-model="student.number" ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-col :span="9">
              <el-input v-model="student.password" ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-col :span="9">
              <el-input v-model="student.name" ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-col :span="4">
              <el-select v-model="student.sex" >
                <el-option
                  v-for="item in sex"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="班级" :label-width="formLabelWidth">
            <el-col :span="6">
              <el-select v-model="student.grade.id" >
                <el-option
                  v-for="item in grades"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="宿舍" :label-width="formLabelWidth">
            <el-col :span="6">
              <el-select v-model="student.dormitory.id" >
                <el-option
                  v-for="item in dormitories"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="电话号码" :label-width="formLabelWidth">
            <el-col :span="9">
              <el-input v-model="student.telephone" ></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="学生信息修改" :visible.sync="dialogFormVisible1" class="dialog">
        <el-form :model="stuInfo">
          <el-form-item label="学号" :label-width="formLabelWidth">
            <el-col :span="9">
              <el-input v-model="stuInfo.number" ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-col :span="9">
              <el-input v-model="stuInfo.name" ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-col :span="4">
              <el-select v-model="stuInfo.sex">
                <el-option
                  v-for="item in sex"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="班级" :label-width="formLabelWidth">
            <el-col :span="6">
              <el-select v-model="stuInfo.grade.id" :placeholder="grade_name">
                <el-option
                  v-for="item in grades"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="宿舍" :label-width="formLabelWidth">
            <el-col :span="6">
              <el-select v-model="stuInfo.dormitory.id" :placeholder="dormitory_name">
                <el-option
                  v-for="item in dormitories"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="电话号码" :label-width="formLabelWidth">
            <el-col :span="9">
              <el-input v-model="stuInfo.telephone" ></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </div>
      </el-dialog>
      <div>
        <el-input v-model="name" placeholder="请输入学生姓名" class="search-input"></el-input>
        <el-button icon="el-icon-search" circle @click="findPageByName"></el-button>
      </div>
      <el-row  type="flex" justify="end">
        <el-col :span="2" ><el-button
          type="primary"
          size="small"
          @click="dialogInit">添加学生</el-button></el-col>
        <el-col :span="2" ><el-button
          type="danger"
          size="small" @click="deleteAll">删除选中</el-button></el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="100">
        </el-table-column>
        <el-table-column
          prop="number"
          label="学号"
          width="140">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="140">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="140">
        </el-table-column>
        <el-table-column
          prop="grade.name"
          label="班级"
          width="140">
        </el-table-column>
        <el-table-column
          prop="dormitory.name"
          label="宿舍"
          width="140">
        </el-table-column>
        <el-table-column
          prop="telephone"
          label="电话号码"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          background
          layout="total, prev, pager, next"
          :total="totalSize" class="page">
        </el-pagination>
      </div>
    </div>

</template>

<script>
export default {
  name: 'index',
  inject: ['reload'],
  data () {
    return {
      tableData: [],
      ids: [],
      multipleSelection: [],
      dormitories: [],
      grades: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      student: {
        number: '',
        name: '',
        password: '',
        telephone: '',
        grade: {
          id: ''
        },
        role: {
          id: 7
        },
        dormitory: {
          id: ''
        },
        sex: ''
      },
      formLabelWidth: '120px',
      sex: [{
        value: '1',
        label: '男'
      }, {
        value: '2',
        label: '女'
      }],
      stuInfo: {
        number: '',
        name: '',
        telephone: '',
        sex: '',
        grade: {
          id: ''
        },
        dormitory: {
          id: ''
        }
      },
      grade_name: '',
      dormitory_name: '',
      // 分页参数
      currentPage: 1,
      pageSize: 6,
      totalSize: 0,
      // 要查找的学生姓名
      name: ''
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    dialogInit: function () {
      this.dialogFormVisible = true
      this.student.number = ''
      this.student.password = ''
      this.student.name = ''
      this.student.telephone = ''
      this.student.address = ''
      this.student.grade.id = ''
      this.student.sex = ''
    },
    /**
     * 分页查询所有学生
     */
    findPage: function () {
      const pageRequest = {
        pageNumber: this.currentPage,
        pageSize: this.pageSize
      }
      this.$api.student.findPage(pageRequest).then((response) => {
        console.log(response)
        this.tableData = response.content
        this.totalSize = response.totalElements
      }).catch((error) => {
        console.log(error)
      })
    },
    findPageByName: function () {
      if (this.name === '') {
        this.findPage()
      } else {
        const pageRequest = {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          name: this.name
        }
        this.$api.student.findPageByName(pageRequest).then((response) => {
          this.tableData = response.content
          this.totalSize = response.totalElements
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    findAllGrade: function () {
      this.$api.grade.findAll().then((response) => {
        this.grades = response
      }).catch((error) => {
        console.log(error)
      })
    },
    findAllDormitory: function () {
      this.$api.dormitory.findAll().then((response) => {
        this.dormitories = response
      }).catch((error) => {
        console.log(error)
      })
    },
    handleCurrentChange () {
      if (this.name === '') {
        this.findPage()
      } else {
        this.findPageByName()
      }
    },
    add: function () {
      if (this.student.number === '') {
        this.dialogFormVisible = false
        this.$errorInfo('学号不能为空')
      } else if (this.student.password === '') {
        this.dialogFormVisible = false
        this.$errorInfo('密码不能为空')
      } else if (this.student.name === '') {
        this.dialogFormVisible = false
        this.$errorInfo('姓名不能为空')
      } else if (this.student.sex === '') {
        this.dialogFormVisible = false
        this.$errorInfo('性别不能为空')
      } else if (this.student.grade.id === '') {
        this.dialogFormVisible = false
        this.$errorInfo('班级不能为空')
      } else if (this.student.dormitory.id === '') {
        this.dialogFormVisible = false
        this.$errorInfo('宿舍不能为空')
      } else if (this.student.telephone === '') {
        this.dialogFormVisible = false
        this.$errorInfo('电话号码不能为空')
      } else {
        this.$api.student.add(this.student).then(response => {
          if (response.code === 200) {
            this.dialogFormVisible = false
            this.$successInfo(response.message)
            this.reload()
          } else {
            this.dialogFormVisible = false
            this.$errorInfo(response.message)
          }
        }).catch(error => {
          this.$errorInfo('网络连接失败')
          console.log(error)
          this.dialogFormVisible = false
        })
      }
    },
    update: function () {
      if (this.stuInfo.number === '') {
        this.dialogFormVisible1 = false
        this.$errorInfo('学号不能为空')
        this.reload()
      } else if (this.stuInfo.name === '') {
        this.dialogFormVisible1 = false
        this.$errorInfo('姓名不能为空')
        this.reload()
      } else if (this.stuInfo.sex === '') {
        this.dialogFormVisible1 = false
        this.$errorInfo('性别不能为空')
      } else if (this.stuInfo.grade.id === '') {
        this.dialogFormVisible1 = false
        this.$errorInfo('班级不能为空')
      } else if (this.stuInfo.dormitory.id === '') {
        this.dialogFormVisible1 = false
        this.$errorInfo('宿舍不能为空')
      } else if (this.stuInfo.telephone === '') {
        this.dialogFormVisible1 = false
        this.$errorInfo('电话号码不能为空')
        this.reload()
      } else {
        this.$api.student.update(this.stuInfo).then(response => {
          if (response.code === 200) {
            this.dialogFormVisible1 = false
            this.$successInfo(response.message)
            this.reload()
          } else {
            this.dialogFormVisible1 = false
            this.$errorInfo(response.message)
          }
        }).catch(error => {
          this.dialogFormVisible1 = false
          this.$errorInfo('网络连接失败')
          console.log(error)
        })
      }
    },
    handleEdit (index, row) {
      this.stuInfo = row
      this.grade_name = this.stuInfo.grade.name
      this.dormitory_name = this.stuInfo.dormitory.name
      this.dialogFormVisible1 = true
    },
    handleDelete (index, row) {
      // eslint-disable-next-line camelcase
      const id = row.id
      this.$api.student.del(id).then(response => {
        if (response.code === 200) {
          this.$successInfo(response.message)
          this.reload()
        } else {
          this.$errorInfo(response.message)
        }
      }).catch(error => {
        this.$errorInfo('网络连接失败')
        console.log(error)
      })
    },
    deleteAll: function () {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id)
      }
      if (this.ids.length === 0) {
        this.$errorInfo('当前未选中任何学生')
      } else {
        this.$api.student.delAll(this.ids).then(response => {
          if (response.code === 200) {
            this.$successInfo(response.message)
            this.ids.length = 0
            this.reload()
          } else {
            this.$errorInfo(response.message)
            this.ids.length = 0
          }
        }).catch(error => {
          this.$errorInfo('网络连接失败')
          console.log(error)
          this.ids.length = 0
        })
      }
    }
  },
  created () {
    this.findPage()
    this.findAllGrade()
    this.findAllDormitory()
  }

}

</script>

<style scoped lang="scss">
  .content{
    margin-top: 50px;
    position: relative;
    .search-input{
      width: 200px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .page{
      position: absolute;
      top: 250px;
      left: 200px;
    }
  }
</style>
